<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>MVVM设计模式</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<!-- MVVM设计模式 -->

<body>
    <!-- 
        指令v-for数据的循环渲染，
        指令v-model数据的双向绑定
        指令v-on:click事件的绑定
        vue中的this始终指向vue实例化的对象，里面就包括data里的数据以及
        methods中的定义的方法，没有data和methods键值对
MVVM操作
     -->
    <!--V层 view 层-->
    <div id="app">
           <input type="text" name="inp" v-model="inputValue">
        <button v-on:click="handleBtnClick" type="button">提交</button>
        <ul>
            <!-- 此时是测试例子故没有考虑：key值的绑定 -->
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
    <script type="text/javascript">
    // M层，model层，
    var app = new Vue({
        el: "#app",
        data: {
            list: [],
            inputValue: ""
        },
        methods: {
            handleBtnClick: function(e) {
                console.log(this);
                this.list.push(this.inputValue);
                this.inputValue = "";
            },
        }
    });
    // 而VM层，是vue框架自己处理，viewmodel层，主要实现model层和view层的双向交互
    //VM层要做的是当model数据层改变时会自动映射到view层，
    //当view层中指令触发时会通过VM层调用model层的逻辑代码，
    //只需关注model层开发即可，view就是样式结构布局，model层和view层通过vue封装的VM层处理即可
    // 是面向数据进行开发，
    //
    </script>
</body>

</html>